import { Button, Select, Switch, Tabs, message, Spin } from 'antd';
import { WeaDialog, WeaSearchGroup, WeaLocaleProvider, WeaBrowser, WeaNewScroll, WeaSelect, WeaDatePicker, WeaFormItem, WeaCheckbox } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import '../../../style/index';
import NoRight from '../../NoRight';

const getLabel = WeaLocaleProvider.getLabel;
import { WeaSwitch } from 'comsMobx';

@observer
class CreateCarUseWorkflowDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      wftypeShow: 0,
      saveSpin: false,
    };
  }

  componentDidMount() {
    const { currentStore } = this.props;
    // currentStore.initUseCarWorkflowSetCreateForm();
    if (!window.weaCubeEngine) {
      window.eventRegister.loadModule('b_cube', () => {
        currentStore.cube_isinit = true;
      }, () => { });
    } else {
      currentStore.cube_isinit = true;
    }
  }

  render() {
    const { parentStore, currentStore } = this.props;
    const { conditioninfo, form, cube_isinit, workflowRight } = currentStore;
    const { saveSpin } = this.state;
    if (workflowRight) {
      return (
        <div>
          <WeaDialog
            ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@vngbwl`}
            className="car"
            title={getLabel(128244, '新建用车申请流程表单设置')}
            visible={this.state.visible}
            onCancel={this.back}
            buttons={[
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@854xb9@onSubmit`} type="primary" onClick={this.onSubmit} disabled={saveSpin}>{getLabel(86, '保存')}</Button>,
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@eme98e@onSubmitToDetails`} type="primary" onClick={this.onSubmitToDetails} disabled={saveSpin}>{getLabel(32159, '保存并进入详细设置')}</Button>,
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e4mjev@back`} type="primary" onClick={this.back}>{getLabel(309, '关闭')}</Button>,
            ]}
          >
            {
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@sl22t5`} spinning={saveSpin}>
                {currentStore.createDialogVisible && this.getHTML()}
              </Spin>
            }
          </WeaDialog>
          {
            cube_isinit && window.weaCubeEngine && window.weaCubeEngine.com && window.weaCubeEngine.com.EditFormDialog &&
            <window.weaCubeEngine.com.EditFormDialog ecId={`${this && this.props && this.props.ecId || ''}_undefined@zupbs8`} />

          }
        </div>
      );
    }
    return (<div><WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@9m342i`} className="car" title={getLabel(128244, '新建用车申请流程表单设置')} visible={this.state.visible} onCancel={this.back}><NoRight ecId={`${this && this.props && this.props.ecId || ''}_NoRight@ghvd53`} visible /></WeaDialog></div>);
  }


  getHTML = () => {
    const { currentStore } = this.props;
    const { conditioninfo, form } = currentStore;
    const { isFormInit } = form;
    const group = [];
    isFormInit && conditioninfo.map((c, index) => {
      const items = [];
      c.items.map((fields) => {
        let component;
        if (fields.domkey[0] == 'subcompanyid') {
          currentStore.isdetach = true;
        }
        if (fields.domkey[0] == 'typeid') { // 流程类型
          component = (<WeaSelect
            ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@oi96bh@${fields.domkey[0]}`}
            options={fields.options}
            showSearch
            onChange={value => form.updateFields({ typeid: { value } }, false)}
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          />);
        } else if (fields.domkey[0] == 'formid') {
          component = (<WeaBrowser
            ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@4g58il@${fields.domkey[0]}`}
            hasAddBtn
            viewAttr={3}
            hasAdvanceSerach
            dataParams={{ isBill: 0, wfMainList: 1 }}
            {...fields.browserConditionParam}
            addOnClick={values => currentStore.showEditForm()}
            onChange={(ids, names, datas) => form.updateFields({ formid: { value: datas[0].id } }, false)}
          />);
        } else {
          component = (<WeaSwitch
            ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@nhovmv@${fields.domkey[0]}`}
            fieldConfig={toJS(fields)}
            form={form}
            onChange={(v) => {
              if (fields.domkey[0] == 'wftype') {
                this.wftypeChange(v);
              } else if (fields.domkey[0] == 'subcompanyid') {
                this.subcompanyidChange(v);
              } else {
                form.updateFields(v, false);
              }
            }}
          />);
        }
        items.push({
          com: (<WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@n4zgtm@${fields.domkey[0]}`}
            style={{ display: (fields.domkey[0] == 'formid' && this.state.wftypeShow == 0) ? 'none' : '' }}
            label={`${fields.label}`}
            labelCol={{ span: `${fields.labelcol}` }}
            error={form.getError(fields)}
            wrapperCol={{ span: `${fields.fieldcol}` }}
          >
            {component}
          </WeaFormItem>),
          colSpan: 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@x1yvz8@${index}`} col={1} needTigger={false} title={c.title} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }

  open = (data) => {
    const { currentStore } = this.props;
    currentStore.initUseCarWorkflowSetCreateForm(data);
    this.setState({
      visible: true,
    });
    currentStore.createDialogVisible = true;
  }

  back = () => {
    this.setState({
      visible: false,
      wftypeShow: 0,
    });
    const { currentStore } = this.props;
    currentStore.createDialogVisible = false;
  }

  subcompanyidChange = (v) => {
    const { currentStore } = this.props;
    const { conditioninfo, form } = currentStore;
    currentStore.subcompanyid = v.subcompanyid.value;
    currentStore.subcompanySpan = v.subcompanyid.valueSpan;
    currentStore.isdetach = true;
  }

  wftypeChange = (v) => {
    const { currentStore } = this.props;
    const { conditioninfo, form } = currentStore;
    this.setState({
      wftypeShow: v.wftype.value,
    });
  }

  onSubmit = () => {
    this.onCommonSubmit({ operation: 'create' });
  }

  onSubmitToDetails = () => {
    this.onCommonSubmit({ operation: 'createToDetails' });
  }

  onCommonSubmit = (results) => {
    const { parentStore, currentStore } = this.props;
    currentStore.form.validateForm().then((f) => {
      if (f.isValid) {
        if (currentStore.form.$('workflowname').value == '') {
          message.error(getLabel(385842, '请填写流程名称'));
          return;
        }
        if (currentStore.detachable && currentStore.form.$('subcompanyid').value == '') {
          message.error(getLabel(518896, '必要信息不完整，红色标记为必填项！'));
          return;
        }
        if (this.state.wftypeShow == 1) {
          if (currentStore.form.$('wftype').value == '1' && currentStore.form.$('formid').value == '') {
            message.error(getLabel(82183, '请选择表单！'));
          } else {
            currentStore.operation = results.operation;
            this.setState({ saveSpin: true });
            currentStore.doSubmit({ aa: '' }, this.onSubmitSuccessCallBack);
          }
        } else {
          // currentStore.operation="createToDetails";
          currentStore.operation = results.operation;
          this.setState({ saveSpin: true });
          currentStore.doSubmit({ aa: '' }, this.onSubmitSuccessCallBack);
        }
      } else {
        f.showErrors();
      }
    });
  }

  onSubmitSuccessCallBack = (result) => {
    this.setState({
      visible: false,
      saveSpin: false,
    });
    const { parentStore, currentStore, routing } = this.props;
    if (currentStore.operation == 'createToDetails') {
      const url = `/workflowengine/path/pathSet/pathDetail/baseSet/baseInfo?workflowId=${result.workflowid}&showLeftTree=false`;
      routing.push(url);
      // parentStore.openWorkflowSet(url,);
    } else {
      parentStore.doTableLoading();
    }
  }
}
export default CreateCarUseWorkflowDialog;
